import Taro from '@tarojs/taro'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Image, Text, View } from '@tarojs/components'
import Images from '@ASSET/Images'
import { useSelector } from 'react-redux'
import { RootStateITF } from '@REDUXITF/index'
import { DataCenterStateITF } from '@REDUXITF/dataCenter'
import Navigate from '@NAVIGATION/navigateManager'
import { Analytic_Type } from '@CONSTANTS/analytic'
import style from './ReportPop.module.scss'

const ReportPop: React.FC = () => {
  const [visible, setVisible] = useState(true)
  const isFirstLoadRef = useRef(true)
  const { reportData } = useSelector<RootStateITF, DataCenterStateITF>(state => state.dataCenter)
  const { UnViewedCount = 0, PainManagementId } = reportData || {}
  const onClick = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.num_home_view_report.eventId)
    setVisible(false)
    isFirstLoadRef.current = false
    if (!PainManagementId) return
    Navigate.planReportDetail?.({ id: PainManagementId })
  }, [PainManagementId])
  useEffect(() => {
    if (!PainManagementId) return
    if (!isFirstLoadRef.current || UnViewedCount < 1) {
      setVisible(false)
    }
    const timer = setTimeout(() => {
      setVisible(false)
      isFirstLoadRef.current = false
    }, 5000)
    // eslint-disable-next-line consistent-return
    return () => clearTimeout(timer)
  }, [PainManagementId, UnViewedCount])
  if (UnViewedCount < 1 || !PainManagementId) return null
  const isDisabled = true
  if (!visible) return null
  if (isDisabled) return null
  return (
    <View className={style.reportPop} onClick={onClick}>
      <View className={style.reportContainer}>
        <Text className={style.reportText}>
          你有
          <Text className={style.reportSelectText}>一份报告</Text>
          待查收
        </Text>
        <Image src={Images.managePlan.bg_report_pop} className={style.bgReportPop} />
      </View>
    </View>
  )
}

export default ReportPop

